<!DOCTYPE html>
<html lang="zh_CN">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<meta name="viewport" content="initial-scale=1, maximum-scale=1">
	<!-- <link rel="shortcut icon" href="http://favicon.ico"> -->
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">

	<!--<link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">-->

	<!-- 固定的css 和 common.js 的引用    -->
	<link rel="stylesheet" href="../css/sm.min.css">
	<link rel="stylesheet" href="../css/sm-extend.min.css">
	<link href="https://cdn.bootcss.com/Swiper/4.0.6/css/swiper.min.css" rel="stylesheet">
	<script type="text/javascript" src="../common/common.js"></script>

	<style type="text/css">
  	/*css 的样式都放在这里*/

  	body{padding: 0;margin: 0}
        .swiper-slide{width: auto!important;}
        .topmenu{height: auto;background-color: white;border-bottom: 1px solid #CCCCCC;padding: 0 10px;line-height: 35px;font-family: "微软雅黑"}

  	.infinite-scroll-preloader {
        margin-top:-20px;
  	}
	#message{
		display: flex;
		justify-content:space-around;
		font-weight: 700;
	}
	.message_block{
		width: 50%;
		text-align: center;
		padding-top: 1rem;
		padding-bottom: 1rem;
		border: solid 1px #D8D8D8;
	}
	#label{
		/*width: auto;*/
		display: flex;
		justify-content:flex-start;
	}
	.label_list{
		width: 4rem;
		border: solid 1px red;
	}
	#list_ul{
		display: flex;
		flex-wrap: wrap;
	}
	.goods_list{
		border:solid 1px #E0E0E0;
		padding-top:5px;
        padding-bottom:5px;
        width: 50%;
	}

	.goods img{
		width: 80%;
		height:100px;
		/*height: 60%;*/
		/*height: 5rem;*/
	}
	.price{
		display: flex;
		justify-content: space-between;
	}
	.name,.price{
		padding-left: 10%;
		padding-right: 10%;
	}
	#goods_img{
		text-align: center;
	}
	.swiper-slide{
		/*border: solid 1px #E0E0E0;*/
		border-left: solid 1px #E0E0E0;
		border-right: solid 1px #E0E0E0;;
		padding: 0.1rem 0.6rem;
	}
	.topmenu{
		padding: 0px;
	}
	.list-block ul{
		padding:1rem 0;
	}
	.jifen_color{
		color: red;
	}
	.price_style{
		color: darkgray;
		/*text-decoration:line-through;*/
	}
	#zongjifen{
		color: red;
		font-size: 18px;
	}
	/*.content,.infinite-scroll,*/
	#addlength{
		top: 3.7rem;
	}

	.list-block{
	  margin: 0 0 1.75rem 0;
	 }
</style>


</head>
<body>
<div class="page-group">
	<div class="page page-current">
		<div id="main" style="background-color: white;" >
			<!--商品列表-->
			<div id="list">
				
				<div class="content infinite-scroll infinite-scroll-bottom" id="addlength" data-distance="0" style="">
					<div class="list-block">
						<ul class="list-container" id="list_ul">
						</ul>
					</div>
					<!-- 加载提示符 -->
					<div class="infinite-scroll-preloader">
						<div class="preloader"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>





<!-- 固定的js引用，所有的jQuery 要用 $$ 表示 -->
<script type="text/javascript" src="https://gitee.com/huaflower/CommonScoreShop/raw/master/js/jquery-1.11.1.min.js"></script>
<!-- 这一行代码是为了 避免js冲突 -->
<script src="https://cdn.bootcss.com/Swiper/4.0.6/js/swiper.min.js"></script>
<script type="text/javascript">var $$ =jQuery.noConflict();</script>

<script type='text/javascript' src='https://gitee.com/huaflower/CommonScoreShop/raw/master/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='https://gitee.com/huaflower/CommonScoreShop/raw/master/js/sm.min.js' charset='utf-8'></script>
<script type='text/javascript' src='https://gitee.com/huaflower/CommonScoreShop/raw/master/js/sm-extend.min.js' charset='utf-8'></script>
<script type="text/javascript" src="../common/common.js"></script>

<script type="text/javascript">
// 函数区域，函数放在“初始化区域的上面”
	var start = 0;
    var count = 10;
    var kind;
    var arraydata = new Array();
//  var str_end="";
    var jiazainum;
    var shangpingArray = new Array();
    var arraycanshu = 0;
    var scoremain;
	// 加载flag
      var loading = false;
      // 最多可加载的条目
      var maxItems = 99999;
      // 每次加载添加多少条目
      var itemsPerLoad = 10;
      // 上次加载的序号

      var lastIndex = 20;

      function getParams(data){
	    // data需要转成json调用 ，函数urlParamParseJson();
 		var jsonData = urlParamParseJson(escape2Html(data));
  	}


      // 注册'infinite'事件处理函数
      $(document).on('infinite', '.infinite-scroll-bottom',function() {
      	if(!loading && arraydata.length >= count){//只有没有正在加载中  和 非最后一次的滑动都请求加载数据，防止滑动多次加载
      		loading = true;
			requestData();

      	}
        $.refreshScroller();
      });


//	商品回调接口
    function requestData(){
		var params;
			params = {
				callbacktype:'persondaylist',
				start:start,
				count:count
			}
        net_request('get','persondaylist',params,successCallback,errorCallBack);
    }


    function successCallback(data){
    	if(typeof(data) != "undefined"){
    		console.log(data);
    		if(data.callbacktype == 'persondaylist'){//商品列表回调
    			friendsSuccess(data);
    		}
    	}

    }

    //接口成功回调
    function friendsSuccess(data){
        if(typeof(data) != "undefined" && data.state == '0'){
//          console.log(data);
//          console.log(data.data[0]);
			arraydata = new Array();
			loading = false;//回调加载完毕
            if(isNotNull(data.body)){
            	arraydata = data.body;
            	jiazainum = arraydata.length;
            	if(isNotNull(arraydata)&&arraydata.length>0){
              		start = arraydata.length+start;
                    for(var q=0;q<arraydata.length;q++){
                		var book_img = "";
                		var book_name = "";
                		var book_price = "";
                		var book_type ="";

                		shangpingArray[arraycanshu]=arraydata[q];


                		if(isNotNull(arraydata[q].day)){
                			book_name = arraydata[q].day;
                		}

                		if(isNotNull(arraydata[q].total_step)){
                			book_price = "￥"+arraydata[q].total_step;
                		}

                		if(isNotNull(arraydata[q].total_step)){
                			book_type = '<span class="jifen_color">'+arraydata[q].total_step+'</span><span>积分</span>';
                		}
//              		
                		var str = '\
							<li class="goods_list">\
							          	<div class="goods">\
							          		<div id="goods_img">\
							          			<img src="'+book_img+'" width="150" height="150"/>\
							          		</div>\
							          		<div id="">\
							          			<div id="" class="name">'+book_name+'</div>\
							          			<div class="price">\
							          				<span>'+book_type+'</span>\
							          				<span class="price_style">'+book_price+'</span>\
							          			</div>\
							          		</div>\
							          	</div>\
							          </li>\
							          ';
						$$("#list_ul").append(str);
//						str_end = str_end + str;
						arraycanshu++;
                    	}
                	}

                  	// 删除加载提示符
                  	$('.infinite-scroll-preloader').remove();
            }else{
            	if(start == 0){
            		$('.infinite-scroll-preloader').remove();
					$$("#list_ul").html('<div style="text-align: center;width:100%;">该类中暂无商品可兑换</div>');
            	}

            }
        }
    }
	function errorCallBack(data){
		console.log(data);
	}

	// 初始化区域
    $(function () {
//  	$$("#list_ul").html("");
		biaoqianData();
		//getParams();
		
        $.init();
    });
  
</script>
</body>
</html>